<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #chart {
            width: 100%;
            height: 100%;
        }

    </style>
</head>

<body>
<div id="chart"></div>

<script src="./echarts.min.js"></script>
<script>
        var chartDom = document.getElementById('chart');
        var chart = echarts.init(chartDom, 'walden');
        var option = {
            color: [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#ff3a4d'
                    },
                    {
                        offset: 1,
                        color: '#ff9e73'
                    }
                ]),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#07a8ff'
                    },
                    {
                        offset: 1,
                        color: '#22d9f2'
                    }
                ])
            ],
            title: [{
                text: 0,
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: 30,
                    fontWeight: 'normal'
                }
            }, {
				text: '全市在押总人数',
                textStyle: {
				    fontSize: 16,
                    fontWeight: 'normal',
                    color: '#1381f1'
                }
			}],
            series: [{
                type: 'pie',
                radius: ['50%', '65%'],
                center: ['50%', '50%'],
                label: {
                    normal: {
                        formatter: "{b} {c}",
                        textStyle: {
                            fontSize: 16,
                            color: ['#235894']
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 5,
                        length2: 30,
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                data: [{
                        value: 0,
                        name: '女'
                    },
                    {
                        value: 0,
                        name: '男'
                    }
                ]
            }]
        };
        chart.setOption(option);

		function getDataThenSetOption(data) {
		    //option.title[1].text = msg
		    //var data = JSON.parse(msg);
			option.series[0].data[0].value = data.female;
			option.series[0].data[1].value = data.male;
			option.title[0].text = data.female + data.male;

			chart.setOption(option);
		}

</script>
</body>
</html>